<template>
  <div id="navmenu" class="container">

    <BouncedDialog :title="id?'编辑':'添加'" :dialog-show.sync="dialogShow" :width="50" class="addMenu">
      <el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-width="80px">
        <el-form-item label="菜单类别" prop="type">
          <el-radio-group v-model="addForm.type">
            <el-radio :label="1">普通</el-radio>
            <el-input v-if="addForm.type == 1" v-model="addForm.href" placeholder="请输入链接地址" class="type" />
            <el-radio :label="2">关联栏目</el-radio>
            <el-select
              v-if="addForm.type ==2"
              v-model="addForm.category_id"
              class="type"
              @change="chooseColumn"
            >
              <el-option
                v-for="item in columnData"
                :key="item.id"
                :label="item.title"
                :value="item.id"
                :disabled="item.disable"
              />
            </el-select>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input v-model="addForm.title" />
        </el-form-item>
        <el-form-item label="菜单状态" prop="status">
          <el-select v-model="addForm.status">
            <el-option label="显示" :value="1" />
            <el-option label="隐藏" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="addForm.sort" />
        </el-form-item>
        <el-form-item label="打开方式">
          <el-select v-model="addForm.target">
            <el-option label="本页面打开" value="_self" />
            <el-option label="新窗口打开" value="_blank" />
          </el-select>
        </el-form-item>

        <div class="btn">
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-form>
    </BouncedDialog>
    <el-tabs id="tabcard" v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in langList"
        :key="item.id"
        :label="item.lang"
        :name="item.lang"
      />
    </el-tabs>
    <div class="center">

      <h3 class="title"><span />导航管理</h3>
      <div class="navcate">
        <ul class="leftNavcate">
          <li class="navtitle">导航列表</li>
          <li
            v-for="item in navList"
            :key="item.id"
            :class="activeId== item.id? 'activeitem':''"
          >
            <span class="navtitle" @click="changenav(item.id)">{{ item.id }}-{{ item.title }}</span>
            <div class="icon">
              <i class="el-icon-delete" @click="delenav(item)" />
              <i class="el-icon-edit" @click="editnav(item)" />
            </div>
          </li>
          <el-button
            type="primary"
            class="add four"
            size="small"
            icon="el-icon-plus"
            style="margin:10px 0 10px 20px"
            @click="addNav"
          >添加导航</el-button>
        </ul>
        <div class="rightmenu">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="addFmenu add four"
            size="small"
            @click="addFmenu"
          >添加菜单</el-button>
          <el-table
            ref="refTable"
            :data="menuData"
            row-key="id"
            :header-cell-style="{'text-align':'center','background-color':'#f5f5f5'}"
            :cell-style="{'text-align':'center'}"
            @row-click="expandChange"
          >
            <el-table-column label="ID" prop="id" width="100" />
            <el-table-column label="菜单名称" prop="title" />
            <el-table-column label="状态" prop="status" width="140px">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="2"
                  active-text="正常"
                  inactive-text="禁用"
                  active-color="#f84311"
                  inactive-color="rgba(0,0,0,0.2)"
                  @change="disableUser(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort" />
            <el-table-column label="操作" fixed="right" width="250px">
              <template slot-scope="scope">
                <el-button size="mini" class="orange" type="primary" @click="addCmenu(scope.row)">添加子菜单</el-button>
                <el-button size="mini" class="edit" @click="edit(scope.row)">编辑</el-button>
                <el-button size="mini" class="dele" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <BouncedDialog :title="addForm2.id?'编辑':'添加'" :dialog-show.sync="dialogShow2" :width="50" class="addMenu">
      <el-form ref="addForm2" :model="addForm2" :rules="rules2" class="addForm" label-width="70px">
        <el-form-item label="名称" prop="title">
          <el-input v-model="addForm2.title" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addForm2.description" type="textarea" />
        </el-form-item>
        <div class="btn">
          <el-button @click="dialogShow2 = false">取 消</el-button>
          <el-button type="primary" @click="submit2()">确 定</el-button>
        </div>
      </el-form>
    </BouncedDialog>
  </div>
</template>

<script>
import navApi from '@/api/nav.js'
import websiteApi from '@/api/website.js'
import columnApi from '@/api/column.js'
import langApi from '@/api/websetting'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      options: [], // 站点列表
      navList: '', // 导航列表
      siteId: '',
      searchForm: {
        website_id: '',
        cate_id: ''
      },
      menuData: [], // 菜单列表
      columnData: [], // 栏目列表
      addForm: {},
      rules: {
        title: [
          { required: 'true', message: '请输入菜单名称', trigger: 'blur' }
        ],
        status: [
          { required: 'true', message: '请选择菜单状态', trigger: 'change' }
        ],
        sort: [
          { required: 'true', message: '请输入菜单排序', trigger: 'blur' }
        ],
        type: [
          { required: 'true', message: '请选择菜单类别', trigger: 'blur' }
        ]
      },
      dialogShow: false,
      dialogShow2: false, // 导航分类弹窗
      addForm2: {}, // 导航表单
      rules2: {
        title: [
          { required: 'true', message: '请输入导航名称', trigger: 'blur' }
        ]
      },
      id: '', // 菜单id
      navid: '', // 导航id
      langList: [],
      activeName: '',
      lang: '',
      category_id: ''
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val
      this.searchForm.website_id = val
      this.getWebLang()
    }
  },
  created() {
    // this.getWebsite()
    this.siteId = this.$store.getters.siteId
    this.searchForm.website_id = this.$store.getters.siteId
    if (this.siteId) {
      this.getWebLang()
    }
  },

  mounted() {

  },
  methods: {
    // 切换关联栏目
    chooseColumn(val, value) {
      var selectName = this.columnData.find(el => el.id == val).title
      if (selectName.substring(1, 4) == '---') {
        this.addForm.title = selectName.substring(4)
      } else {
        this.addForm.title = selectName
      }
    },
    // 站点语言列表
    getWebLang() {
      langApi.langInfo({ site_id: this.searchForm.website_id }).then(res => {
        this.langList = res.data

        this.lang = res.data[0].lang
        this.activeName = res.data[0].lang
        this.getNavcate()
      })
    },
    // tab切换
    handleClick(val, value) {
      this.activeName = val.name
      this.lang = val.label
      // this.type = val.index
      // this.getList()
      this.getNavcate()
      this.getNav()
    },
    // 更改状态
    disableUser(row) {
      const val = {
        id: row.id,
        parent_id: row.parent_id,
        website_id: row.website_id,
        nav_cate_id: row.nav_cate_id,
        title: row.title,
        status: row.status,
        href: row.href,
        sort: row.sort,
        type: row.type,
        target: row.target,
        category_id: row.category_id,
        lang: this.lang
      }

      navApi.navUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 新增导航
    addNav() {
      this.addForm2 = {
        title: '',
        id: '',
        description: '',
        lang: this.lang
      }
      this.dialogShow2 = true
    },
    // 编辑导航
    editnav(row) {
      this.addForm2 = {
        title: row.title,
        id: row.id,
        description: row.description
      }
      this.dialogShow2 = true
    },
    // 删除导航
    delenav(row) {
      this.$confirm('此操作将永久删除该导航, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const val = {
          id: row.id,
          website_id: row.website_id
        }
        navApi.navCateDelete(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getNavcate()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 提交添加、修改导航
    submit2() {
      this.$refs.addForm2.validate((valid) => {
        if (valid) {
          if (!this.addForm2.id) {
            const val = {
              title: this.addForm2.title,
              description: this.addForm2.description,
              website_id: this.searchForm.website_id,
              lang: this.lang
            }
            navApi.navCateSave(val).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow2 = false
                this.getNavcate()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            const val = {
              id: this.addForm2.id,
              title: this.addForm2.title,
              description: this.addForm2.description,
              website_id: this.searchForm.website_id
            }
            navApi.navCateUpdate(val).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow2 = false
                this.getNavcate()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },
    // 栏目列表
    getColumnlist() {
      columnApi.columnList({ website_id: this.searchForm.website_id, lang: this.activeName }).then(res => {
        // this.columnData = res.data
        this.getTreeData(res.data)
      })
    },
    // 切换栏目
    changeColumn(val) {
      this.addForm.category_id = val[val.length - 1]
    },
    // 递归获取到columnData的数据
    getTreeData(data) {
      const columnArry = []
      for (var i = 0;i < data.length;i++) {
        if (data[i].status == 1) {
          columnArry.push({ 'id': data[i].id, 'title': data[i].title, 'parent_id': data[i].parent_id, 'disable': false })
        } else {
          columnArry.push({ 'id': data[i].id, 'title': data[i].title, 'parent_id': data[i].parent_id, 'disable': true })
        }
        if (data[i].children.length > 0) {
          for (var x = 0;x < data[i].children.length;x++) {
            columnArry.push({ 'id': data[i].children[x].id, 'title': data[i].children[x].title, 'parent_id': data[i].children[x].parent_id })
          }
        }
      }
      // 给parent_id!=0 的选项的title前加个标识
      columnArry.forEach(el => {
        if (el.parent_id != 0) {
          this.$set(el, 'title', ' --- ' + el.title)
        }
      })
      this.columnData = columnArry
    },
    // 添加主菜单
    addFmenu() {
      this.id = ''
      this.addForm = {
        parent_id: 0,
        website_id: this.searchForm.website_id,
        nav_cate_id: this.searchForm.cate_id,
        title: '',
        status: 1,
        href: '',
        sort: '',
        type: '',
        target: '_blank',
        category_id: '',
        lang: this.lang
      }
      this.getColumnlist()
      this.dialogShow = true
    },
    // 添加子菜单
    addCmenu(row) {
      this.id = ''
      this.addForm = {
        parent_id: row.id,
        website_id: this.searchForm.website_id,
        nav_cate_id: this.searchForm.cate_id,
        title: '',
        status: 1,
        href: '',
        sort: '',
        type: '',
        target: '_blank',
        category_id: '',
        lang: this.lang
      }
      this.getColumnlist()
      this.dialogShow = true
    },
    // 编辑菜单
    edit(row) {
      this.getColumnlist()
      this.id = row.id
      this.addForm = {
        id: row.id,
        parent_id: row.parent_id,
        website_id: row.website_id,
        nav_cate_id: row.nav_cate_id,
        title: row.title,
        status: row.status,
        href: row.href,
        sort: row.sort,
        type: row.type,
        target: row.target,
        category_id: row.category_id,
        lang: row.lang

      }
      this.dialogShow = true
    },
    // 提交添加、修改菜单
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (!this.addForm.id) {
            navApi.navSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getNav()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            navApi.navUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getNav()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },
    // 删除菜单
    del(row) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const val = {
          id: row.id,
          website_id: row.website_id,
          cate_id: row.category_id
        }
        navApi.navDelete(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getNav()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 展开折叠
    expandChange(row, index, e) {
      this.$refs.refTable.toggleRowExpansion(row)
    },
    // 左侧导航分类列表
    getNavcate() {
      navApi.navCateList({ website_id: this.siteId, lang: this.lang }).then(res => {
        if (res.code == 0) {
          this.navList = res.data

          if (res.data.length > 0) {
            this.searchForm.cate_id = res.data[0].id
            // this.getNav(this.searchForm.website_id)// 分类列表读取完毕 读取导航
            this.changenav(this.searchForm.cate_id)
          }
        } else {
          // this.$message.error(res.msg)
        }
      })
    },
    changenav(id) {
      this.searchForm.cate_id = id
      this.activeId = id
      this.getNav()
    },
    // 菜单列表
    getNav() {
      const val = {
        website_id: this.siteId,
        cate_id: this.searchForm.cate_id,
        lang: this.lang
      }
      navApi.navList(val).then(res => {
        this.menuData = res.data
      })
    }
  }
}
</script>
<style lang="scss">
#navmenu{
  .el-tabs__header{
    margin-bottom:0 ;
  }
  .tabs.el-tabs--card>.el-tabs__header .el-tabs__item{
  background-color: #eee;
  border: none;

}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border-radius: 0;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #fff;
}
  .addMenu{
    .el-select{
      width: 100%;
    }
    .el-input.type, .el-select.type{
      width: 200px;
      margin-right: 30px;
    }
  }
  .el-cascader-panel .el-radio{
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 10px;
      right: 10px;
  }
  .el-cascader-panel .el-radio__input{
      visibility: hidden;
  }
  .el-cascader-panel .el-cascader-node__postfix {
      top: 10px;
  }

}
</style>
<style scoped lang='scss'>
.center{
  background-color: #fff;
  // padding: 20px 0;
  border: solid 1px #eee;
  border-top: none;
  h3.title{
    margin-left: 20px;
  }
  .navcate{
    // border-top: solid 1px #eee;
    display: flex;
    justify-content: left;
  }
}
.leftNavcate{
    list-style: none;
    margin-top: 20px;
    li.navtitle{
      font-size: 15px;
      font-weight: bold;
    }
    li{
      width: 220px;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .navtitle{
        cursor: pointer;
        width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .icon{
        display: none;
        i{
          cursor: pointer;
        }
        .el-icon-delete{
          margin-right: 10px;
        }
      }

    }
    .activeitem .icon{
        display: block;
      }
    // hover的样式
    li:hover{
      color: #f84311 ;
      background-color: #f4f8fc;
      .icon{
        display: block;
      }
    }
    //选中的样式
    li.activeitem{
      color: #f84311 ;
      background-color: #f4f8fc;
    }
}
.rightmenu{
  -webkit-box-flex: 3;
  box-flex:3;
  padding-top: 20px;
  padding-left: 15px;
  border-left: solid 1px #eee;
  width: calc(100% - 220px);
  .addFmenu{
    margin-bottom: 20px;
  }
}
.status{
  padding: 5px 10px;
  color: #fff;
  border-radius: 5px;
}
.status.show{
  background-color: #0bc40f;
}
.status.hide{
  background-color: #df9513;
}
.addCmenu{
  color: #fff;
  background-color: #fe872b;
  border-color: #edeef3;
  border-radius: 16px;
}
.editor{
  color: #fff;
  background-color: #31b0d5;
  border-color: #2aabd2;
}
.dele{
  color: #fff;
  background-color: #ed5554;
  border-color: #ed5554;
}
</style>
